<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      // 柱状图数据
      barChartData: {
        xAxis: ['一月', '二月', '三月', '四月', '五月', '六月'],
        series: [3250, 2300, 6500, 8080, 7070, 3100]
      },
      // 饼图数据
      pieChartData: [
        { value: 335, name: '科技企业' },
        { value: 310, name: '制造企业' },
        { value: 234, name: '服务企业' },
        { value: 135, name: '其他企业' }
      ]
    }
  },
  mounted() {
    this.initBarChart()
    this.initPieChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.barChart) this.barChart.dispose()
    if (this.pieChart) this.pieChart.dispose()
  },
  methods: {
    initBarChart() {
      this.barChart = echarts.init(this.$refs.barChart)
      const option = {
        title: {
          text: '月度收费统计',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#333',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)',
          borderColor: '#333',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '20%',
          bottom: '15%'
        },
        xAxis: {
          data: this.barChartData.xAxis,
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        yAxis: {
          axisLabel: {
            color: '#666',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [{
          name: '金额',
          type: 'bar',
          data: this.barChartData.series,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#36CBCB' },
                { offset: 1, color: '#0099FF' }
              ]
            ),
            borderRadius: [6, 6, 0, 0],
            shadowColor: 'rgba(0,153,255,0.3)',
            shadowBlur: 8
          },
          label: {
            show: true,
            position: 'top',
            color: '#333',
            fontSize: 12
          }
        }]
      }
      this.barChart.setOption(option)
    },
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart)
      const colors = ['#36CBCB', '#40B5F3', '#975FE4', '#F2637B']
      const option = {
        title: {
          text: '企业类型分布',
          left: 'center',
          textStyle: {
            fontSize: 16,
            color: '#333',
            fontWeight: 'bold'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%',
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: {
            color: '#fff'
          }
        },
        series: [{
          name: '企业分布',
          type: 'pie',
          radius: ['30%', '60%'],
          center: ['50%', '50%'],
          data: this.pieChartData,
          color: colors,
          label: {
            color: '#333',
            fontSize: 12,
            formatter: '{d}%'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut'
        }]
      }
      this.pieChart.setOption(option)
    }
  },
  handleResize() {
    if (this.barChart) this.barChart.resize()
    if (this.pieChart) this.pieChart.resize()
  }
}
</script>

<template>
  <div class="workbench-page">
    <el-row :gutter="20">
      <el-col :span="17">
        <div class="card-container">
          <div class="card-title">园区数据</div>
          <div class="card-statistic">
            <!-- 自定义统计组件替代 el-statistic -->
            <div class="custom-statistic">
              <div class="statistic-title">年度累计收费（元）</div>
              <div class="statistic-value">56233.03</div>
            </div>
            <div class="custom-statistic">
              <div class="statistic-title">入驻企业总数（个）</div>
              <div class="statistic-value">6</div>
            </div>
            <div class="custom-statistic">
              <div class="statistic-title">月卡车辆总数（辆）</div>
              <div class="statistic-value">5</div>
            </div>
            <div class="custom-statistic">
              <div class="statistic-title">一体杆总数（台）</div>
              <div class="statistic-value">48</div>
            </div>
          </div>
        </div>
        <div class="card-container">
          <div class="card-title">月度收费统计</div>
          <div ref="barChart" class="chart-container" style="height: 600px;" />
        </div>
      </el-col>
      <el-col :span="7">
        <div class="card-container">
          <div class="card-title">企业类型分布</div>
          <div ref="pieChart" class="chart-container" />
        </div>
        <div class="card-container">
          <div class="card-title">常用功能</div>
          <div class="card-entry">
            <div class="card-entry-item" style="cursor:pointer" @click="$router.push('/park/enterprise')">
              <img src="@/assets/add-enterprise.png" alt="">
              <span>添加企业</span>
            </div>
            <div class="card-entry-item" style="cursor:pointer" @click="$router.push('/sys/user')">
              <img src="@/assets/employee-manage.png" alt="">
              <span>员工管理</span>
            </div>
            <div class="card-entry-item" style="cursor:pointer" @click="$router.push('/park/enterprise')">
              <img src="@/assets/add-bill.png" alt="">
              <span>添加账单</span>
            </div>
            <div class="card-entry-item" style="cursor:pointer" @click="$router.push('/bigscreen')">
              <img src="@/assets/data-screen.png" alt="">
              <span>数据大屏</span>
            </div>
          </div>
        </div>

      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.workbench-page {
  background-color: #fff;
  height: 100%;
  .card-container {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
  }
  .card-title {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
  }
  .card-statistic {
    display: flex;
    justify-content: space-between;
  }
}

/* 自定义统计组件样式 */
.custom-statistic {
  text-align: center;
  .statistic-value {
    font-size: 28px;
    font-weight: bold;
    color: #333;
  }
  .statistic-title {
    font-size: 13px;
    color: #999;
    margin-bottom: 12px;
  }
}

::v-deep .el-statistic__head { /* 如果仍需要覆盖 element 样式 */
  margin-bottom: 12px;
}

.card-entry {
  display: flex;
  justify-content: space-between;
  &-item {
    text-align: center;
    img {
      width: 40px;
    }
    span {
      font-size: 12px;
      display: block;
      margin-top: 8px;
    }
  }
}
.chart-container {
  height: 400px;
  width: 100%;
}
</style>
